<template>
    <BaseECharts :option="options" height="300px"></BaseECharts>
</template>

<script setup lang="ts">
import echarts from '@/components/baseECharts/config'
import type { ECOption } from '@/components/baseECharts/config'

const colorList = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#56E4FF30' },
        { offset: 1, color: '#56E4FF' },
    ]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#8509DE30' },
        { offset: 1, color: '#8509DE' },
    ]),
]

const dataType = ['主板', 'CPU', '屏幕', '内存条', '显卡', '固态', '显示器', '风扇']

const getData = () => {
    return dataType.map((item) => {
        const random = Number((Math.random() * 200).toFixed())
        return { value: random, name: item }
    })
}

const options = reactive<ECOption>({
    graphic: [
        // 自定义左上角标题
        {
            type: 'group',
            children: (() => {
                const img = new URL('../../../images/title-box-2.png', import.meta.url).href
                const width = 143
                const height = 39
                const title = '单位更换数量'
                return [
                    {
                        type: 'text',
                        style: {
                            align: 'center',
                            verticalAlign: 'middle',
                            text: title,
                            width: width,
                            height: height,
                            lineHeight: height,
                            x: width / 2,
                            y: height / 2,
                            fontSize: 18,
                            fontWeight: 'bold',
                            fill: '#fff',
                            backgroundColor: {
                                image: img,
                            },
                            textShadowBlur: 20,
                            textShadowColor: '#fff',
                        },
                    },
                ]
            })(),
        },
    ],
    grid: {
        top: '20%',
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            data: dataType,
            boundaryGap: true,
            axisLabel: {
                color: '#2473ef',
                fontSize: 14,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#666',
                },
            },
            splitLine: { show: false },
            axisTick: { show: false },
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: { color: '#fff' },
            splitLine: {
                show: true,
                lineStyle: {
                    type: [10, 2],
                    color: '#666',
                    width: 1,
                },
            },
            axisLine: { show: false },
            axisTick: { show: false },
        },
    ],
    // 图例
    legend: {
        top: '2%',
        right: '8%',
        // 图例水平布局
        orient: 'horizontal',
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 15,
        textStyle: { color: '#fff', fontSize: 16 },
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    series: [
        {
            name: '公司A',
            type: 'bar',
            data: getData(),
            barWidth: 10,
            emphasis: {
                focus: 'series',
            },
            itemStyle: {
                color: colorList[0],
                borderRadius: 10,
            },
        },
        {
            name: '公司B',
            type: 'bar',
            data: getData(),
            barWidth: 10,
            emphasis: {
                focus: 'series',
            },
            itemStyle: {
                color: colorList[1],
                borderRadius: 10,
            },
        },
    ],
})
</script>

<style lang="scss" scoped></style>
